<template>
	<view class="loginWays">
		<view class="bg"></view>
		<view class="mrak"></view>
		<view class="content">
			<view class="logo-box">
				<view class="logo">
					<image style="width: 100%; height: 100%;" src="../../static/logo-3.png" mode=""></image>
				</view>
			</view>
			<view class="introduce">最全的APP捷图收集站</view>
			<view class="login-btns">
				<button class="btn1" plain @click="getUserInfo">微信登录</button>
				<button class="btn2" plain @click="openLoginPage">邮箱登录/注册</button>
			</view>
			<view class="agreement">
				<view class="radio">
					<view class="radio_btn" @click="changeChecked">
						<radio style="transform:scale(0.7)" value="r1" :checked="checked" color="#1890FF" />
						登录代表您已同意捷图
					</view>
					<text class="text" @click="openAgreement">用户协议</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/common/api.js';
export default {
	props: {
		isComponent: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			checked: false,
			userInfo: {}
		};
	},
	methods: {
		changeChecked() {
			this.checked = !this.checked;
		},

		// 获取授权后到绑定登录页面
		getUserInfo() {
			// console.log('checked ==>', this.checked);
			if (this.checked) {
				if (uni.getUserProfile) {
					uni.getUserProfile({
						desc: '微信登录',
						success: infoRes => {
							// console.log('用户信息 ==>', infoRes);
							this.userInfo = infoRes.userInfo;
							uni.setStorageSync('wxUserInfo', infoRes.userInfo);
							this.login();
						},
						fail: e => {
							console.log('拒绝授权');
						}
					});
				} else {
					console.log('uni.getUserProfile API不可用');
				}
			} else {
				uni.showToast({
					title: '请阅读并勾选用户协议',
					icon: 'none'
				});
			}
		},

		// 到账号登录页面
		openLoginPage() {
			if (this.checked) {
				uni.navigateTo({
					url: '../login/login'
				});
			} else {
				uni.showToast({
					title: '请阅读并勾选用户协议',
					icon: 'none'
				});
			}
		},

		// 通过微信登录接口获取code
		getCode() {
			return new Promise((resolve, reject) => {
				uni.login({
					provider: 'weixin',
					success(res) {
						resolve(res.code);
					},
					fail(err) {
						reject(new Error('微信登录失败'));
					}
				});
			});
		},

		async login() {
			uni.showLoading({
				title: '登录中',
				mask: true
			});
			let code = await this.getCode();
			// console.log('code ==>', code);
			try {
				let res = await this.$ajax(api.login, { code, avatar: this.userInfo.avatarUrl });
				console.log('loginRes ==>', res);
				if (res.statusCode == 200) {
					let data = res.data.data;
					if (data.type) {
						uni.setStorageSync('access_token', data.access_token);
						this.$store.commit('login', data.user);
						uni.hideLoading();
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						// console.log(this.isComponent);
						if (!this.isComponent) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);
						}
					} else {
						uni.setStorageSync('openid', data.open_id); // openid
						uni.navigateTo({
							url: '../wxlogin/wxlogin'
						});
					}
				}
			} catch (e) {
				console.log(e);
				uni.hideLoading();
			}
		},

		// 打开用户协议
		openAgreement() {
			uni.navigateTo({
				url: '../agreement/agreement'
			});
		}
	}
};
</script>

<style lang="scss">
.loginWays {
	position: relative;
	height: 100vh;
	.bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100vh;
		background: url('https://api.protograph.cn/assets/img/default-background.png') center no-repeat;
		background-size: 300%;
		overflow: hidden;
		z-index: 0;
	}
	.bg::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: inherit;
		filter: blur(12rpx);
		z-index: 2;
		transform: scale(1.5);
	}
	.mrak {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: rgba($color: #fff, $alpha: 0.8);
		z-index: 3;
	}
	.content {
		position: relative;
		z-index: 4;
	}
	.logo-box {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 90rpx 0 0;
	}
	.logo {
		width: 214rpx;
		height: 316rpx;
	}
	.btn1,
	.btn2 {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		font-weight: 700;
		margin: 0 64rpx 40rpx;
	}
	.btn1,
	.btn2 {
		border-radius: 44rpx;
	}
	.btn1 {
		background-color: #1890ff;
		border: 2rpx solid #1890ff;
		color: #fff;
	}
	.btn2 {
		background-color: #fff;
		color: #333333;
		border: 2rpx solid #e7e7e7;
		// margin-bottom: 20rpx;
	}
	.agreement {
		display: flex;
		align-items: center;
		margin: 0 64rpx;
	}
	.radio {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #555555;
	}
	.radio_btn {
		display: flex;
		align-items: center;
	}
	.text {
		color: #1890ff;
		margin: 0 10rpx;
	}
	.introduce {
		text-align: center;
		color: #666;
		margin-bottom: 60rpx;
		margin-top: 20rpx;
	}
}
</style>
